<template>
  <div class="ticket-container">
    <!-- 左侧选择内容部分 -->
    <div class="ticket-settings">
      <h3>请选择在“堂食小票”上显示的内容</h3>
      <el-form label-width="120px">
        <!-- 标题设置 -->
        <el-form-item label="标题">
          <el-checkbox v-model="settings.title.storeName">门店名称</el-checkbox>
          <el-checkbox v-model="settings.title.headerGreeting">头部欢迎语</el-checkbox>
          <el-checkbox v-model="settings.title.ticketType">票据类型</el-checkbox>
        </el-form-item>
        <el-form-item label="设置文案" v-if="settings.title.headerGreeting">
          <el-input v-model="settings.title.headerGreetingText" placeholder="欢迎光临"></el-input>
        </el-form-item>

        <!-- 订单信息 -->
        <el-form-item label="订单信息">
          <el-checkbox v-model="settings.orderInfo.tableNumber">桌号/取餐号</el-checkbox>
          <el-checkbox v-model="settings.orderInfo.peopleCount">人数</el-checkbox>
          <el-checkbox v-model="settings.orderInfo.orderNumber">订单编号</el-checkbox>
          <el-checkbox v-model="settings.orderInfo.orderTime">下单时间</el-checkbox>
        </el-form-item>

        <!-- 菜品信息 -->
        <el-form-item label="菜品信息">
          <el-checkbox v-model="settings.foodInfo.details">菜品详情</el-checkbox>
          <el-checkbox v-model="settings.foodInfo.notes">备注</el-checkbox>
        </el-form-item>

        <!-- 结算信息 -->
        <el-form-item label="结算信息">
          <el-checkbox v-model="settings.settlementInfo.paymentDetails">支付详情</el-checkbox>
          <el-checkbox v-model="settings.settlementInfo.discountDetails">优惠详情</el-checkbox>
        </el-form-item>

        <!-- 补充信息 -->
        <el-form-item label="补充信息">
          <el-checkbox v-model="settings.additionalInfo.storeAddress">门店地址</el-checkbox>
          <el-checkbox v-model="settings.additionalInfo.storePhone">门店电话</el-checkbox>
<!--          <el-checkbox v-model="settings.additionalInfo.publicQRCode">公众号二维码</el-checkbox>-->
<!--          <el-checkbox v-model="settings.additionalInfo.miniProgramQRCode">小程序二维码</el-checkbox>-->
        </el-form-item>

        <!-- 结束致谢语 -->
        <el-form-item label="结束致谢语">
          <el-checkbox v-model="settings.footer.thanks">结束致谢语</el-checkbox>
          <el-input
              v-model="settings.footer.thanksText"
              placeholder="欢迎再次光临"
              v-if="settings.footer.thanks"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存配置</el-button>
          <el-button @click="resetSettings">恢复默认</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 右侧预览部分 -->
    <div class="ticket-preview">
      <el-card class="ticket-card">
        <h3>堂食小票</h3>
        <div class="ticket-content">
          <!-- 标题 -->
          <div class="ticket-header" v-if="hasHeaderContent">
            <p v-if="settings.title.storeName">门店名称：{{ storeName }}</p>
            <p v-if="settings.title.headerGreeting">{{ settings.title.headerGreetingText }}</p>
            <p v-if="settings.title.ticketType">票据类型：堂食小票</p>
          </div>

          <!-- 订单信息 -->
          <div class="ticket-order-info" v-if="hasOrderInfo">
            <p v-if="settings.orderInfo.tableNumber">桌号：{{ tableNumber }}</p>
            <p v-if="settings.orderInfo.peopleCount">人数：{{ peopleCount }}</p>
            <p v-if="settings.orderInfo.orderNumber">订单编号：{{ orderNumber }}</p>
            <p v-if="settings.orderInfo.orderTime">下单时间：{{ orderTime }}</p>
          </div>

          <!-- 菜品信息 -->
          <div class="ticket-food-items" v-if="hasFoodInfo">
            <el-table
                :data="foodItems"
                border
                style="width: 100%"
                v-if="settings.foodInfo.details"
            >
              <el-table-column prop="name" label="菜品名称"></el-table-column>
              <el-table-column prop="quantity" label="数量"></el-table-column>
              <el-table-column prop="price" label="小计"></el-table-column>
            </el-table>
            <p v-if="settings.foodInfo.notes && notes">备注：{{ notes }}</p>
          </div>

          <!-- 结算信息 -->
          <div class="ticket-settlement-info" v-if="hasSettlementInfo">
            <p v-if="settings.settlementInfo.paymentDetails">{{ paymentDetails }}</p>
            <p v-if="settings.settlementInfo.discountDetails">{{ discountDetails }}</p>
          </div>

          <!-- 补充信息 -->
          <div class="ticket-additional-info" v-if="hasAdditionalInfo">
            <p v-if="settings.additionalInfo.storeAddress">门店地址：{{ storeAddress }}</p>
            <p v-if="settings.additionalInfo.storePhone">门店电话：{{ storePhone }}</p>
            <img
                v-if="settings.additionalInfo.publicQRCode"
                :src="publicQRCode"
                class="qrcode"
                alt="公众号二维码"
            >
            <img
                v-if="settings.additionalInfo.miniProgramQRCode"
                :src="miniProgramQRCode"
                class="qrcode"
                alt="小程序二维码"
            >
          </div>

          <!-- 结束致谢语 -->
          <div class="ticket-footer" v-if="settings.footer.thanks">
            <p>{{ settings.footer.thanksText }}</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 默认配置对象
const DEFAULT_SETTINGS = {
  title: {
    storeName: true,
    headerGreeting: false,
    ticketType: true,
    headerGreetingText: "欢迎光临"
  },
  orderInfo: {
    tableNumber: true,
    peopleCount: true,
    orderNumber: true,
    orderTime: true
  },
  foodInfo: {
    details: true,
    notes: false
  },
  settlementInfo: {
    paymentDetails: true,
    discountDetails: true
  },
  additionalInfo: {
    storeAddress: false,
    storePhone: false,
    publicQRCode: false,
    miniProgramQRCode: false
  },
  footer: {
    thanks: true,
    thanksText: "欢迎再次光临"
  }
};

export default {
  data() {
    return {
      // 预览数据
      storeName: "微盟餐厅",
      tableNumber: "A1",
      peopleCount: "2人",
      orderNumber: "N201601292218",
      orderTime: new Date().toLocaleString(),
      foodItems: [
        { name: "北海帝蟹盖饭/份", quantity: "x1", price: "¥124.0" },
        { name: "可乐/罐", quantity: "x2", price: "¥22.0" },
        { name: "茶位/份", quantity: "x2", price: "¥10.0" }
      ],
      notes: "不要加香菜",
      paymentDetails: "实付金额：¥205.2（含优惠¥10.0）",
      discountDetails: "会员优惠：-¥10.0",
      storeAddress: "上海市宝山区长江路258号",
      storePhone: "021-66886688",
      publicQRCode: "https://via.placeholder.com/100x100?text=公众号",
      miniProgramQRCode: "https://via.placeholder.com/100x100?text=小程序",

      // 当前配置
      settings: JSON.parse(JSON.stringify(DEFAULT_SETTINGS))
    };
  },
  computed: {
    hasHeaderContent() {
      const t = this.settings.title;
      return t.storeName || t.headerGreeting || t.ticketType;
    },
    hasOrderInfo() {
      const o = this.settings.orderInfo;
      return o.tableNumber || o.peopleCount || o.orderNumber || o.orderTime;
    },
    hasFoodInfo() {
      const f = this.settings.foodInfo;
      return f.details || f.notes;
    },
    hasSettlementInfo() {
      const s = this.settings.settlementInfo;
      return s.paymentDetails || s.discountDetails;
    },
    hasAdditionalInfo() {
      const a = this.settings.additionalInfo;
      return a.storeAddress || a.storePhone || a.publicQRCode || a.miniProgramQRCode;
    }
  },
  methods: {
    saveSettings() {
      this.$message.success("配置保存成功");
      // 这里可以添加实际保存到服务器的逻辑
      console.log("Current settings:", this.settings);
    },
    resetSettings() {
      this.settings = JSON.parse(JSON.stringify(DEFAULT_SETTINGS));
      this.$message.success("已恢复默认设置");
    }
  }
};
</script>

<style scoped>
.ticket-container {
  display: flex;
  margin: 20px;
}

.ticket-settings {
  width: 50%;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.ticket-preview {
  width: 50%;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-left: 20px;
}

.ticket-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
}

.ticket-content {
  margin-bottom: 20px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
}

.ticket-header,
.ticket-footer {
  text-align: center;
  margin: 10px 0;
}

.ticket-order-info p,
.ticket-settlement-info p {
  margin: 4px 0;
}

.ticket-items {
  margin-bottom: 15px;
}

.qrcode {
  width: 100px;
  height: 100px;
  margin: 10px;
  display: block;
}
</style>
